<template>
    <div>
        <Top/>
        <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/jpetstore.css" type="text/css">
</head>
<body>
<div th:replace="common/top"/>

<div id="Content">
    <div id="Catalog">
        <form action="http://localhost:8082/order/completeCheckOutForm" th:action="@{/order/completeCheckOutForm}" method="post">

            <table>
                <tbody><tr>
                    <th colspan="2">Payment Details</th>
                </tr>
                <tr>
                    <td>Card Type:</td>
                    <td><select name="order.cardType">
                        <option selected="selected" value="Visa">Visa</option><option value="MasterCard">MasterCard</option><option value="American Express">American Express</option>
                    </select></td>
                </tr>
                <tr>
                    <td>Card Number:</td>
                    <td><input name="order.creditCard" value="999 9999 9999 9999" type="text"> * Use a fake
                        number!</td>
                </tr>
                <tr>
                    <td>Expiry Date (MM/YYYY):</td>
                    <td><input name="order.expiryDate" value="12/03" type="text"></td>
                </tr>
                <tr>
                    <th colspan="2">Billing Address</th>
                </tr>

                <tr>
                    <td>First name:</td>
                    <td><input th:value="${session.account.firstName}" name="order.billToFirstName" value="ABC" type="text" ></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><input  th:value="${session.account.lastName}" name="order.billToLastName" value="XYX" type="text"></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td><input  th:value="${session.account.address1}" name="order.billAddress1" value="901 San Antonio Road" type="text" size="40"></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><input th:value="${session.account.address2}" name="order.billAddress2" value="MS UCUP02-206" type="text" size="40"></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><input th:value="${session.account.city}" name="order.billCity" value="Palo Alto" type="text"></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><input  th:value="${session.account.state}" name="order.billState" value="CA" type="text" size="4"></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td><input th:value="${session.account.zip}" name="order.billZip" value="94303" type="text" size="10"></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><input th:value="${session.account.country}" name="order.billCountry" value="USA" type="text" size="15"></td>
                </tr>

                <tr>
                    <td colspan="2"><input name="shippingAddressRequired" value="true" type="checkbox">Ship to different address...</td>
                </tr>

                </tbody>
            </table>
            <!-- <input name="newOrder" value="Continue" type="submit" @click="clickc()"> -->
        </form>
        <!-- 这下面其实是为了方便转换界面，之后要重写这一段代码利用from提交 -->
        <a href="/order/completeCheckOutForm" class="Button">Continue</a>
    </div>
</div>

<div th:replace="common/bottom"/>
</body>
</html>
<Bottom/>
    </div>
</template>
<style scoped>

</style>
<script>
import Top from '../../common/top.vue'
import Bottom from '../../common/bottom.vue'

export default{
  components: { 
    Top,
    Bottom
  },
  methods : {
      clickc(){
        window.location.href("http://localhost:8082/order/completeCheckOutForm");
        console.log("wzr最美")
      }
  }

}
</script>
